let vm = new Vue({
    el: '.main-container',  //选中整个main
    data() {
        return {
            id: {},//初始化对象     vue建议声明对象同时进行初始化，避免undefinded
            role:{},
            yxUsers:{},
            yxbtnShow:false,
            yxIds:[],//已选的用户id
            //未选的用户
            wxUsers:{},
            wxbtnShow:false,
            wxIds:[],
            // highLight:false,
            setting: {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: "parentId",//父节点的名字
                        idKey: "id" //子节点的名字
                    },//开启简单树
                    key: {
                        title: 'ztree'
                    }
                },
                callback: {//回掉函数
                    onClick: this.onClick
                },
                view: {
                    fontCss: this.fontCss
                }
            },
            nodes: []
        }
    },
    methods: {
        init: function () {
            axios({
                url: "/guguanjia/manager/sysOffice" //相对路径同样受到base标签影响
            }).then(
                response => {  //省略function关键字  自动传递上下文中的this
                    //this.apps = response.data.obj.list;
                    this.nodes = response.data.obj
                    // this.nodes[this.nodes.length] = {'id':0,'name':'全部机构'};
                    $.fn.zTree.init($("#treeOffice"), this.setting, this.nodes);
                }
            ).catch(error => {
                console.log(error.message);
            })
            // console.log(tree)
        },
        onClick: function (event, treeOffice, TreeNode) {

            //根据公司把公司id设置为当前节点的查询条件
            this.id = TreeNode.id;
            let treeobj = $.fn.zTree.getZTreeObj("treeOffice");
            let arrayNodes = treeobj.transformToArray(treeobj.getNodes());
            for (let i = 0; i <arrayNodes.length ; i++) {
                arrayNodes[i].highLight=false;
                //更新节点
                treeobj.updateNode(arrayNodes[i]);
            }
            //查询未选中的用户
            this.selectNotSelectRoleUser(this.role.id,this.id);
            // console.log(this.condition.oid)
        },
        fontCss: function (treeID, treeNode) {
            // console.log(this.id)
            if (treeNode.id == this.id) {
                return {'color': 'red'};
            } else {
                return {'color': 'black'};
            }
            // return treeNode.highLight ? {'color': 'red'} : {'color': 'black'};
        },
        //读取已选的用户
        selectRole:function(rid){
            axios({
                url: `/guguanjia/manager/user/selectUserById/${rid}` //相对路径同样受到base标签影响
            }).then(
                response => {  //省略function关键字  自动传递上下文中的this
                    this.yxUsers=response.data.obj;
                    for (let i in this.yxUsers) {
                        //默认为未选中
                        this.yxUsers[i].checked = false;
                    }
                }
            ).catch(error => {
                console.log(error.message);
            })
        },
        //对已选的用户的处理
        checkYXUser:function (id) {
            //把选择的用户的id放到数组中
            for (let i in this.yxUsers) {
                if (id==this.yxUsers[i].id){
                    //控制按钮的选择状态
                    this.yxUsers[i].checked = !this.yxUsers[i].checked;
                    if (this.yxUsers[i].checked){
                        //id被选中,加入id数组中
                        this.yxIds.push(id);
                        //显示移除按钮
                        this.yxbtnShow=true;
                        // console.log(this.yxIds)
                        //结束
                    }else { //取消选中
                        for (let j in this.yxIds) {
                            if (id==this.yxIds[j]){
                                this.yxIds.splice(j,1);
                            }
                        }
                    }
                }
            }
            //id数组为0则把按钮取消显示
            if (this.yxIds.length==0){
                this.yxbtnShow=false;
            }
            console.log(this.yxbtnShow)
        },
        //确定按钮移除已选用户
        deleteBatch:function () {
            axios({
                url: `/guguanjia/manager/role/deleteBatch`, //相对路径同样受到base标签影响
                params:{
                    rid:this.role.id,
                    ids:this.yxIds+''//数值传递，防止解析的时候key变成ids[]
                }
            }).then(
                response => {  //省略function关键字  自动传递上下文中的this
                   layer.msg(response.data.msg);
                   //刷新页面
                    this.initData();
                    this.selectRole(this.role.id);
                    this.selectNotSelectRoleUser(this.role.id,this.id);
                }
            ).catch(error => {
                console.log(error.message);
            })
        },
        initData:function () {
            this.yxUsers={};
            this.yxbtnShow=false;
            this.yxIds=[];
        },
        selectNotSelectRoleUser:function (rid,oid) {
            axios({
                url: `/guguanjia/manager/user/selectNotSelectRoleUser/${rid}/${oid}`, //相对路径同样受到base标签影响
            }).then(
                response => {  //省略function关键字  自动传递上下文中的this
                    this.wxUsers=response.data.obj;
                    for (let i in this.wxUsers) {
                        //默认为未选中
                        this.wxUsers[i].checked = false;
                    }
                }
            ).catch(error => {
                console.log(error.message);
            })
        },
        // 选择待选用户的操作
        checkWXUser:function (id) {
            //把选择的用户的id放到数组中
            for (let i in this.wxUsers) {
                if (id==this.wxUsers[i].id){
                    //控制按钮的选择状态
                    this.wxUsers[i].checked = !this.wxUsers[i].checked;
                    if (this.wxUsers[i].checked){
                        //id被选中,加入id数组中
                        this.wxIds.push(id);
                        //显示移除按钮
                        this.wxbtnShow=true;
                    }else { //取消选中
                        for (let j in this.wxIds) {
                            if (id==this.wxIds[j]){
                                this.wxIds.splice(j,1);
                            }
                        }
                    }
                }
            }
            //id数组为0则把按钮取消显示
            if (this.wxIds.length<=0){
                this.wxbtnShow=false;
            }
        },
        //确定添加已选用户
        insertBatch:function () {
            axios({
                url: `/guguanjia/manager/role/insertBatch`, //相对路径同样受到base标签影响
                params:{
                    rid:this.role.id,
                    ids:this.wxIds+''//数值传递，防止解析的时候key变成ids[]
                }
            }).then(
                response => {  //省略function关键字  自动传递上下文中的this
                    layer.msg(response.data.msg);
                    //刷新页面
                    this.initwxData();
                    this.selectRole(this.role.id);
                    this.selectNotSelectRoleUser(this.role.id,this.id);
                }
            ).catch(error => {
                console.log(error.message);
            })
        },
        initwxData:function () {
            this.wxUsers={};
            this.wxbtnShow=false;
            this.wxIds=[];
        },
    },
    created: function () {
        console.log(parent.layer.obj)
        this.id = parent.layer.obj.officeId;
        console.log(this.id);
        this.role.id=parent.layer.obj.id;
        this.init();
        this.selectRole(this.role.id);
        //查未选的用户
        this.selectNotSelectRoleUser(this.role.id,this.id);
        // console.log(this.id)
        //console.log(parent.layer.obj);
    },
});